<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="header.jsp" %>
<style>

    #components{
        min-height: 100px;
    }
    #target{
        min-height: 200px;
        border: 1px solid #ccc;
        padding: 5px;
    }
    #target .component{
        border: 1px solid #fff;
    }
    #temp{
        width: 500px;
        background: white;
        border: 1px dotted #ccc;
        border-radius: 10px;
    }

    .popover-content form {
        margin: 0 auto;
        width: 213px;
    }
    .popover-content form .btn{
        margin-right: 10px
    }
    #source{
        min-height: 500px;
    }
</style>
<div id="page-wrapper">
    <div class="row">
        <div class="col-sm-12">
            <h1 class="page-header">添加认证用户</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <div class="row">
        <div class="span6">
            <div class="clearfix">
                <h2>构造器</h2>
                <hr>
                <div id="build">
                    <form id="target" class="form-horizontal">
                        <fieldset>
                            <div id="legend" class="component" rel="popover" title="角色名称" trigger="manual"
                                 data-content="
        <form class='form'>
          <div class='controls'>
            <input type='text' id='orgvalue' placeholder='请输入角色名称'>
            <hr/>
            <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
          </div>
        </form>"
                            >
                                <input type="hidden" name="name" value="" class="leipiplugins" leipiplugins="form_name"/>
                                <legend class="leipiplugins-orgvalue">点击填写申请角色名称</legend>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>

        <div class="span6">
            <h2>拖拽控件</h2>
            <hr>
            <div class="tabbable">
                <ul class="nav nav-tabs" id="navtab">
                    <li class="active"><a href="#1" data-toggle="tab">常用控件</a></li>
                    <li class><a href="#2" data-toggle="tab">定制控件</a></li>
                    <%--<li class><a id="sourcetab" href="#5" data-toggle="tab">源代码</a></li>--%>
                </ul>
                <form class="form-horizontal" id="components">
                    <fieldset>
                        <div class="tab-content">

                            <div class="tab-pane active" id="1">


                                <!-- Text start -->
                                <div class="control-group component" rel="popover" title="文本框控件" trigger="manual"
                                     data-content="
<form class='form'>
<div class='controls'>
<label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
<label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
<hr/>
<button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
                                >
                                    <!-- Text -->
                                    <label class="control-label leipiplugins-orgname">文本框</label>
                                    <div class="controls">
                                        <input type="text" placeholder="默认值" title="文本框" value="" class="leipiplugins" leipiplugins="text"/>
                                        <input type="hidden" name="label" value="文本框" />
                                        <input type="hidden" name="type" value="0" />
                                        <input type="hidden" name="valueTemplate"  />
                                    </div>

                                </div>
                                <!-- Text end -->


                                <!-- Textarea start -->
                                <div class="control-group component" rel="popover" title="多行文本控件" trigger="manual"
                                     data-content="
<form class='form'>
<div class='controls'>
<label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
<label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
<hr/>
<button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
                                >
                                    <!-- Textarea -->
                                    <label class="control-label leipiplugins-orgname">多行文本</label>
                                    <div class="controls">
                                        <div class="textarea">
                                            <textarea title="多行文本" class="leipiplugins" leipiplugins="textarea"/> </textarea>
                                            <input type="hidden" name="label" value="多行文本" />
                                            <input type="hidden" name="type" value="3" />
                                            <input type="hidden" name="valueTemplate"  />
                                        </div>
                                    </div>
                                </div>
                                <!-- Textarea end -->

                                <!-- Select start -->
                                <div class="control-group component" rel="popover" title="下拉控件" trigger="manual"
                                     data-content="
<form class='form'>
<div class='controls'>
<label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
<label class='control-label'>下拉选项</label>
<textarea style='min-height: 200px' id='orgvalue'></textarea>
<p class='help-block'>不同的选择以#相隔</p>
<hr/>
<button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
                                >
                                    <!-- Select -->
                                    <label class="control-label leipiplugins-orgname">下拉菜单</label>
                                    <div class="controls">
                                        <select title="下拉菜单" class="leipiplugins" leipiplugins="select">
                                            <option>选项一</option>
                                            <option>选项二</option>
                                            <option>选项三</option>
                                        </select>
                                        <input type="hidden" name="label" value="下拉菜单" />
                                        <input type="hidden" name="type" value="1" />
                                        <input type="hidden" name="valueTemplate" value="选项一#选项二#选项三" />
                                    </div>

                                </div>
                                <!-- Select end -->

                                <!-- Multiple radios start -->
                                <div class="control-group component" rel="popover" title="单选控件" trigger="manual"
                                     data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
      <label class='control-label'>单选框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>不同的选择以#相隔</p>
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
                                >
                                    <label class="control-label leipiplugins-orgname">单选框</label>
                                    <div class="controls leipiplugins-orgvalue">
                                        <!-- Multiple Checkboxes -->
                                        <label class="radio">
                                            <input type="radio" title="单选框" value="选项1" class="leipiplugins" leipiplugins="radio">
                                            选项1
                                        </label>
                                        <label class="radio">
                                            <input type="radio" title="单选框" value="选项2" class="leipiplugins" leipiplugins="radio">
                                            选项2
                                        </label>
                                    </div>
                                    <input type="hidden" name="label" value="单选框" />
                                    <input type="hidden" name="type" value="5" />
                                    <input type="hidden" name="valueTemplate" value="选项一#选项二" />
                                </div>
                                <!-- Multiple radios end -->

                                <!-- Multiple Checkboxes start -->
                                <div class="control-group component" rel="popover" title="复选控件" trigger="manual"
                                     data-content="
  <form class='form'>
    <div class='controls'>
      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
      <label class='control-label'>复选框</label>
      <textarea style='min-height: 200px' id='orgvalue'></textarea>
      <p class='help-block'>不同的选择以#相隔</p>
      <hr/>
      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
    </div>
  </form>"
                                >
                                    <label class="control-label leipiplugins-orgname">复选框</label>
                                    <div class="controls leipiplugins-orgvalue">
                                        <!-- Multiple Checkboxes -->
                                        <label class="checkbox">
                                            <input type="checkbox" title="复选框" value="选项1" class="leipiplugins" leipiplugins="checkbox">
                                            选项1
                                        </label>
                                        <label class="checkbox">
                                            <input type="checkbox" title="复选框" value="选项2" class="leipiplugins" leipiplugins="checkbox">
                                            选项2
                                        </label>
                                    </div>
                                    <input type="hidden" name="label" value="复选框" />
                                    <input type="hidden" name="type" value="6" />
                                    <input type="hidden" name="valueTemplate" value="选项一#选项二" />
                                </div>
                                <!-- Multiple Checkboxes end -->
                            </div>
                            <div class="tab-pane" id="2">
                                <div class="control-group component" rel="popover" title="文件上传" trigger="manual"
                                     data-content="
          <form class='form'>
            <div class='controls'>
              <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
              <hr/>
              <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
            </div>
          </form>"
                                >
                                    <label class="control-label leipiplugins-orgname">文件上传</label>

                                    <!-- File Upload -->
                                    <div class="controls">
                                        <input type="file" name="file" title="文件上传" class="leipiplugins" leipiplugins="uploadfile">
                                        <input type="hidden" name="label" value="下拉菜单" />
                                        <input type="hidden" name="type" value="2" />
                                        <input type="hidden" name="valueTemplate"  />
                                    </div>
                                </div>

                                <!-- Editor start -->
                                <div class="control-group component" rel="popover" title="富文本控件" trigger="manual"
                                     data-content="
          <form class='form'>
            <div class='controls'>
              <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
              <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'>
              <hr/>
              <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
            </div>
          </form>"
                                >
                                    <!-- Editor -->
                                    <label class="control-label leipiplugins-orgname">富文本编辑器</label>
                                    <div class="controls">
                                        <div class="textarea">
                                            <textarea title="富文本编辑器" class="leipiplugins" leipiplugins="editor"/> </textarea>
                                            <input type="hidden" name="label" value="富文本编辑器" />
                                            <input type="hidden" name="type" value="4" />
                                            <input type="hidden" name="valueTemplate"  />
                                        </div>
                                    </div>
                                </div>
                                <!-- Editor end -->


                            </div>

                            <%--<div class="tab-pane" id="5">--%>
                                <%--<textarea id="source" class="span6"></textarea>--%>
                            <%--</div>--%>
                        </div>

                    </fieldset>
                </form>
            </div><!--tab-content-->
        </div><!---tabbable-->

    </div> <!-- row -->
    <div class="text-left">
        <div class="control-group">
            <label for="owner_id" class="control-label">审核人：</label>
            <div class="controls">
                <select name="owner_id" id="owner_id">

                </select>
            </div>
        </div>
        <button class="btn btn-primary" onclick="save()" style="width: 120px;">提交</button>
    </div>
</div>
<!-- /#page-wrapper -->
<%@include file="footer.jsp" %>
<link href="../../dist/css/bootstrap.css?2024" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="../../dist/js/jquery-1.7.2.min.js?2024"></script>
<script type="text/javascript"  src="../../dist/js/bootstrap.min.js?2024"></script>
<script type="text/javascript" charset="utf-8" src="../../dist/js/leipi.form.build.core.js?2024"></script>
<script type="text/javascript" charset="utf-8" src="../../dist/js/leipi.form.build.plugins.js?2024"></script>
<script>
    $(document).ready(function() {
        loadOption();
    });

    function loadOption(){
        $.ajax({
            url: rootUrl+'mng/user',
            contentType:"application/json",
            type: 'get',
            dataType: 'json'
        })
        .success(function(data){
            console.log(data);
            var html = "";
            for (var i = 0; i < data.data.users.length; i++){
                html += '<option value="'+data.data.users[i].userId+'">'+data.data.users[i].username+'</option>'
            }
            $("#owner_id").html(html);
        })
        .error(function(data){
            alert(data.message);
        });
    }

    function save(){
        var GroupEntity = {
            name: "",
            owner_id:"",
            groupForms: ""
        };
        GroupEntity.owner_id = $("#owner_id").val();
        var GroupFormEntityArray = [];
        var param = $('#target').serializeArray();
        var GroupFormEntity = {
            label: "",
            type: "",
            valueTemplate: ""
        };
        console.log(param);
        for (var i = 0; i < param.length; i++){
            if(param[i].name == "name"){
                GroupEntity.name = param[i].value;
            }else if(param[i].name == "label"){
                GroupFormEntity.label = param[i].value;
            }else if(param[i].name == "type"){
                GroupFormEntity.type = param[i].value;
            }else if(param[i].name =="valueTemplate"){
                GroupFormEntity.valueTemplate = param[i].value;
                GroupFormEntityArray.push(GroupFormEntity);
                GroupFormEntity = new Object();
            }
        }

        GroupEntity.groupForms = GroupFormEntityArray;
        console.log(JSON.stringify(GroupEntity));
        if(GroupEntity.name == ""){
            alert("请输入认证角色名称！");
            return;
        }
        if(GroupEntity.groupForms.length == 0){
            alert("请拖拽控件，添加用户认证方式！");
            return;
        }
        $.ajax({
            url: rootUrl+'mng/group',
            contentType:"application/json",
            type: 'post',
            dataType: 'json',
            data: JSON.stringify(GroupEntity),
        })
        .success(function(data){
            console.log(data);
            alert(data.message);
            //location.reload();
        });
    }
</script>